<template>
  <div class="detailPage">
    <!--  -->
    <div class="information">
      <div class="p1">
        <span class="span1">王芳</span>
        <span class="span2">欢迎参加校庆云报到</span>
      </div>
      <div class="p2">
        <span class="span1">您是</span>
        <span class="span2">第5879位</span>
        <span class="span1">云报到校友</span>
      </div>
      <div class="p3">您给母校送上祝福</div>
    </div>
    <!-- 卡片 -->
    <div style="padding: 20px 0px">
      <div
        class="card_box"
        :style="{
          background: 'url(' + styleBj + ')',
          backgroundSize: '100% 100%',
        }"
      >
        <div class="left">
          <div class="title">
            <div class="p2">都安高中</div>
            <span class="p3">校友卡</span>
          </div>
          <div class="message">
            <div class="m1">
              姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：王芳
            </div>
            <div class="m1">入学年份：2021年</div>
            <div class="m1">入学班级：初23班、高148班</div>
          </div>
        </div>
        <div class="right">
          <u--image
            :showLoading="true"
            :src="head"
            width="60px"
            height="70px"
          ></u--image>
          <div class="right_text">
            <span>百年校庆</span>
            <span>1923-2023</span>
          </div>
        </div>
      </div>
    </div>
    <u--text
      text="点击【更换证件照】可以更换电子校友卡照片，校友云报到纪念卡照片同步更换"
    ></u--text>
    <!-- 按钮 -->
    <div
      class="btn_box"
      style="
        padding: 20px 5px;
        box-sizing: border-box;
        background: white;
        width: 100%;
      "
    >
      <button
        class="btn"
        @click="changeCard"
        style="
          background: #fff;
          color: #1990ff;
          border: 1px solid #1990ff;
          border-radius: 10px;
        "
      >
        更换证件照
      </button>
      <button
        @click="goReturn"
        class="btn"
        style="
          margin-top: 15px;
          background: #fff;
          color: #1990ff;
          border-radius: 10px;
          border: 1px solid #1990ff;
        "
      >
        返回首页
      </button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      head: "https://cdn.uviewui.com/uview/album/1.jpg",
      styleBj: require("../../static/index/card_2.png"),
      card1: require("../../static/index/card_1.png"),
      card2: require("../../static/index/card_2.png"),
      num: true,
    };
  },
  methods: {
    //更换卡片
    changeCard() {
      this.num = !this.num;
      if (this.num) {
        this.styleBj = this.card2;
      } else {
        this.styleBj = this.card1;
      }
    },
    //回到首页
    goReturn() {
      uni.redirectTo({
        url: "/pages/index/index",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.detailPage {
  background: white;
  padding: 0px 15px;
  .information {
    background: white;
    padding: 30px 10px;
    padding-bottom: 10px;
    .p1 {
      .span1 {
        font-size: 20px;
        margin-right: 10px;
        font-weight: bold;
      }
    }
    .p2 {
      margin: 30px 0px;
      .span2 {
        font-size: 20px;
        margin: 0px 5px;
        color: #1990ff;
        font-weight: bold;
      }
    }
  }
  //卡片
  .card_box {
    width: 100%;
    height: 200px;
    // background: url("../../static/index/card_1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-between;
    padding: 20px 15px;
    padding-right: 20px;
    box-sizing: border-box;
    margin: 0px auto;
    border-radius: 10px;
    .left {
      .title {
        display: flex;
        align-items: center;
        color: white;
        padding-left: 40px;
        margin-top: 6px;
        .p2 {
          margin: 0px 15px 0px 10px;
          font-size: 18px;
        }
        .p3 {
          font-size: 12px;
          margin-top: 5px;
        }
      }
      .message {
        color: white;
        font-size: 12px;
        padding-left: 10px;
        margin-top: 37px;
        .m1 {
          line-height: 30px;
        }
        .message_right {
        }
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      align-items: center;
      .right_text {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #fdf789;
        font-size: 12px;
        margin-top: 40px;
        span {
          line-height: 22px;
        }
      }
    }
  }
}
</style>